<template>
  <div class="header-container">
    <div class="logo-bg">
      <img class="bg" src="@/assets/img/header-bg.png" alt="">
      <img class="logo" src="@/assets/img/logo.png" alt="">
    </div>
    <div class="welcome">
      欢迎你
      <span class="colored" style="margin-right: 8px">，andrea</span>
      登录
      <span class="colored" style="margin: 0 28px;">|</span>
      <span v-if="current.length" style="margin-right: 10px;">
                {{current[0]}}
            </span>
      <span v-if="current.length">
                {{current[1]}}
            </span>
    </div>
  </div>
</template>

<script>
    export default {
        name: "PublicHeader",
        data() {
          return {
              current: [],
          }
        },
        methods: {
             currentTime() {
                var d = new Date(),
                    str = '', str2 = '';
                 str += d.getFullYear() + '-'; //获取当前年份
                 str += d.getMonth() + 1 + '-'; //获取当前月份（0——11）
                 str += d.getDate() + '';
                 str2 += d.getHours() + ':';
                 str2 += d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes() + '';
                this.current = [str, str2];
            }
        },
        created() {
            setInterval(() => {
                this.currentTime();
            }, 1000);
        }
    }
</script>

<style scoped lang="scss">
.header-container{
    width: 100%;
    height: 90px;
    position: relative;
    z-index: 2;
    .logo-bg{
        width: 100%;
        padding-top: 10px;
        position: relative;
        height: 90px;
        .bg{
            position: relative;
            left: 50%;
            width: 1920px;
            transform: translateX(-50%);
        }
        .logo{
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
            z-index: 10;

        }
    }
    .welcome{
        position: absolute;
        right: 40px;
        bottom: 14px;
        height: 20px;
        line-height: 20px;
        text-align: right;
        z-index: 15;
        color: #fff;
        font-size: 16px;
        .colored{
            color: #06e3ec;
        }
    }
}
</style>
